<style lang="less">
</style>

<template>
    <div class="report-user-balance-record-view">
        <Card>
            <span slot="title">代理余额流水记录</span>
            <span slot="extra">
                <Button  size="small" type="success" icon="loop" @click="getList">刷新列表</Button>
            </span>
            <Form label-position="right" label-width="70" inline>
                <Row>
                    <FormItem label="时间段:">
                        <DatePicker size="small" :value="search.created_at" :options="dateOptions" :editable="false" :clearable="false" @on-change="handleChangeDate" type="datetimerange" placeholder="请选择时间段" style="width:270px"></DatePicker>
                    </FormItem>

                    <FormItem label-width="0">
                        <Input style="width: 280px;" size="small" placeholder="订单编号/账号/昵称" v-model="search.keyword"></Input>
                    </FormItem>
                    <FormItem label="类型：">
                        <Select size="small" v-model="search.type" placeholder="类型">
                            <Option value="">全部</Option>
                            <Option value="order_settlement">订单结算</Option>
                            <Option value="withdraw">提现</Option>
                        </Select>
                    </FormItem>

                    <FormItem label-width="0">
                        <Button type="success" :loading="searchLoading" size="small" icon="ios-search"
                                @click="handleSearch">筛选
                        </Button>
                    </FormItem>
                </Row>

            </Form>

            <Row>
                <Col>
                    <Table  border :loading="loading" height="450" :context="self" :columns="columns" :data="data"></Table>
                </Col>
            </Row>
            <Row style="padding: 5px 0">
                <Col>
                <Page ref="Page"
                      :total="page.total"
                      :size="page.size"
                      :current.sync="page.current"
                      @on-change="handleChangePage"
                      @on-page-size-change="handleChangePageSize"
                      :page-size-opts="page.sizes" show-sizer show-elevator></Page>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import moment from 'moment';

    export default {
        data () {
            return {
                self: this,

                searchLoading: false,
                search: {
                    is_export: 'no',
                    keyword: '',
                    type: '',
                    created_at: [],
                },

                loading: false,
                exportLoading: false,

                page: {
                    total: 0,
                    current: 1,
                    size: 10,
                    sizes: [10, 30, 50, 100],
                },

                dateOptions: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },

                columns: [
                    {
                        title: '订单编号',
                        key: 'order_sn',
                    },
                    {
                        title: '代理账号',
                        key: 'agent_name'
                    },
                    {
                        title: '交易类型',
                        key: 'type_text'
                    },
                    {
                        title: '交易金额(元)',
                        key: 'money'
                    },
                    {
                        title: '交易后账户余额(元)',
                        key: 'balance'
                    },
                    {
                        title: '交易时间',
                        key: 'created_at',
                        width: 150,
                    }
                ],
                data: []
            }
        },

        mounted () {
            this.getList();
        },

        created () {
            this.initColumn();
            let start_date = moment().subtract(1, 'month').format('YYYY-MM-DD 00:00:00');
            let end_date = moment().format('YYYY-MM-DD 23:59:59');
            this.search.created_at = [start_date, end_date];
        },

        methods: {
            initColumn () {
                let vm = this;

                this.columns.forEach(item => {

                    if (item.key == 'type_text') {
                        item.render = (h, param) => {
                            if (util.oneOf(param.row.type, ['withdraw'])) {
                                return h('span', { style: {color: 'green'}}, param.row.type_text);
                            } else {
                                return h('span', { style: {color: 'red'}}, param.row.type_text);
                            }
                        };
                    }

                    if (item.key == 'money') {
                        item.render = (h, param) => {
                            if (util.oneOf(param.row.type, ['withdraw'])) {
                                return h('span', { style: {color: 'green'}}, '-' + param.row.money);
                            } else {
                                return h('span', { style: {color: 'red'}}, '+' + param.row.money);
                            }
                        };
                    }
                });
            },

            getList() {
                this.loading = true;
                this.searchLoading = true;

                let params = {
                    page: this.page.current,
                };
                params = Object.assign(params, this.search);

                util.api().get(`/admin/api/reports/agent/balance/record`, {
                    headers: {
                        pageSize: this.page.size,
                    },
                    params
                }).then((resp) => {
                    this.$Message.destroy();
                    if (resp.data.status == true) {
                        this.data = resp.data.data;
                        this.page.total = resp.data.meta.total;
                        this.page.current = resp.data.meta.current_page;
                    } else {
                        this.$Message.error(resp.data.message);
                    }
                    this.loading = false;
                    this.searchLoading = false;
                }).catch((e) => {
                    util.handleApiException(e, this, '获取账户账户余额流水记录数据失败');
                    this.searchLoading = false;
                    this.loading = false;
                })
            },

            handleSearch() {
                this.getList();
            },

            handleSearch() {
                this.page.current = 1;
                this.getList();
            },

            handleChangePage(page) {
                this.page.current = page;
                this.getList();
            },

            handleChangePageSize(size) {
                this.page.size = size;
                this.getList();
            },

            handleChangeDate (date) {
                console.log(date);
                if (date[1] != undefined) {
                    this.search.created_at = date;
                } else {
                    this.search.created_at = [];
                }
            }
        }
    };
</script>
